<template>
  <el-dialog :visible.sync="show" title="选择维保单位" @open="open" width="11.25rem" append-to-body :close-on-press-escape="false" :close-on-click-modal="false">
    <div class="dialog-table-container">
      <el-form :inline="true" class="search-form">
        <el-form-item >
          <el-input v-model="searchParams.name" size="mini" placeholder="输入维保单位名称" clearable style="width: 2rem;"/>
          <el-button type="primary" @click="getList" size="mini">查询</el-button>
          <el-button type="primary" @click="reset" size="mini">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="list"
        ref="multipleTable"
        :class="{'single': !multiple}"
        v-loading="listLoading"
        @row-click="rowClick"
        @selection-change="selectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="企业名称" prop="name"/>
        <el-table-column label="企业地址" prop="address"/>
        <el-table-column label="企业负责人" prop="responsiblePerson"/>
        <el-table-column label="联系电话" prop="responsiblePhone"/>
      </el-table>
      <pagination v-show="page.total > 0" :total="page.total" :page.sync="page.currentPage" :limit.sync="page.pageSize"  @pagination="getList"/>
      <div class="dialog-footer" style="margin-top: 0.125rem;">
        <el-button @click="show = false" plain size="mini">取消</el-button>
        <el-button type="primary" @click="submit" size="mini">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import Pagination from '../../../Pagination/index.vue'
import danger from "@/api/monitor/hiddenDanger.js"

export default {
  name: 'SelectRepairDept',
  components: {
    Pagination
    },
  data() {
    return {
      list: [],
      listSelected: [],
      listLoading: false,
      searchParams: {},
      page: {
        total:2,
        currentPage: 1,
        pageSize: 10
      }
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    show: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    },
  },
  methods: {
    open() {
      this.getList()
    },
    // 获取人员列表
    async getList() {
      this.listLoading = true
       let res = await danger.getWbDept(Object.assign({
        pageNum: this.page.currentPage,
        pageSize: this.page.pageSize,
      }, this.searchParams))


        this.list = res.data
        this.listLoading = false
        this.page.total = res.data.total
  
     
    },
    reset() {
      this.searchParams = {}
      this.page.currentPage = 1
      this.getList()
    },
    // 点击当前行切换选中
    rowClick(row) {
      this.$refs['multipleTable'].toggleRowSelection(row)
    },
    // 监听表格勾选变化
    selectionChange(val) {
      if (!this.multiple && val.length > 1) {
        const row = val.pop()
        this.$refs['multipleTable'].clearSelection()
        this.$refs['multipleTable'].toggleRowSelection(row)
      } else {
        this.listSelected = val
      }
    },
    // 提交选择项
    submit() {
      if (!this.listSelected.length) {
        return this.$message.warning('请选择维保单位！')
      }
      this.$emit('change', this.multiple ? this.listSelected : this.listSelected[0])
      this.show = false
    },
    // 清空勾选
    close() {
      this.$refs['multipleTable'].clearSelection()
    }
  }
};
</script>

<style lang="scss" scoped>
    .search-form{
     display: flex;
     justify-content: flex-end;
    }
    .el-pagination{
    .btn-prev{
      border: none!important;
      background: url(/static/workR/fy.png)!important;
    }
    }
</style>
